﻿
@{
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}

<div id="page"></div>

<script type="text/html" id="tplPage">
    <div>
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">{{lang.Field.ColorType}}：</label>
                            <div class="layui-input-inline">
                                <select id="selType" lay-filter="Type">
                                    <option value="" selected>所有状态</option>
                                    <option value="0">电池片颜色</option>
                                    <option value="1">组件颜色</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <button id="btnSearch" class="layui-btn" type="button">{{lang.Field.Search}}</button>
                            <button id="btnAdd" class="layui-btn" type="button">{{lang.Field.Add}}</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card">
                <div class="layui-card-body">
                    <table id="table" lay-filter="tableEvent"></table>
                </div>
            </div>
        </div>
    </div>
</script>

<script id="editForm" type="text/html">
    <form class="layui-form">
        <input id="hidPkId" type="hidden" value="{{d.PkId == null ? 0 : d.PkId}}" />

        <div class="layui-form-item" style="margin-top:20px;">
            <label class="layui-form-label"><i class="red">*</i>颜色类型：</label>
            <div class="layui-input-inline">
                <select id="selColorType" style="width:300px;">
                    <option value="0" {{d.ColorType == 0 ? 'selected' : ''}}>电池片颜色</option>
                    <option value="1" {{d.ColorType == 1 ? 'selected' : ''}}>组件颜色</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="red">*</i>颜色代码：</label>
            <div class="layui-input-inline" style="width:300px;">
                <input id="txtColorCode" type="text" value="{{d.ColorCode == null ? '' : d.ColorCode}}" name="ColorCode" lay-verify="required|ColorCode" lay-verType="tips" autocomplete="off" class="layui-input" placeholder="请输入颜色代码">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="red">*</i>颜色名称：</label>
            <div class="layui-input-inline" style="width:300px;">
                <input id="txtColor" type="text" value="{{d.Color == null ? '' : d.Color}}" name="Color" lay-verify="required|Color" lay-verType="tips" autocomplete="off" class="layui-input" placeholder="请输入颜色名称">
            </div>
        </div>
    </form>
</script>

@section Scripts{
    <script>
        var vm = new Vue({
            el: "#page",
            template: "#tplPage",
            data: {
                lang: JSON.parse(lang).package
            }
        });

        setTimeout(function () {
            initLayui();
        }, 50);

        function initLayui() {
            layui.use(['table', 'layer', 'form'], function () {
                var table = layui.table;

                var options = {
                    elem: '#table',
                    url: '/ParaSetting/QueryColors',
                    method: 'post',
                    where: {},
                    page: {
                        limit: 15,
                        limits: [15, 20, 25, 30, 40, 50]
                    },
                    response: {
                        statusName: 'ErrCode',
                        statusCode: 200,
                        msgName: 'ErrCode',
                        countName: 'TotalCount',
                        dataName: 'Data'
                    },
                    cols: [[
                        { type: 'numbers', title: '序号', align: 'center' },
                        { field: 'CNColorType', title: '颜色类型', align: 'center' },
                        { field: 'ColorCode', title: '颜色代码', align: 'center' },
                        { field: 'Color', title: '颜色名称', align: 'center' },
                        {
                            title: '操作', align: 'center', align: 'center', templet: function (d) {
                                return '<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</button>\
                                                        <button class="layui-btn layui-btn-sm" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</button>';
                            }
                        }
                    ]]
                };

                initTable();
                function initTable() {
                    options.page.curr = 1;
                    options.where.colorType = $('#selType').val();

                    if (table.index <= 0) {
                        table.render(options);
                    } else {
                        table.reload('table', options);
                    }
                }

                table.on('tool(tableEvent)', function (obj) {
                    var event = obj.event;
                    var data = obj.data;

                    if (event == 'edit') {
                        editLevel('编辑', data);
                    } else {
                        layer.confirm('确定删除该颜色？', { icon: 3 }, function (index) {
                            $.ajax({
                                url: '/ParaSetting/DeleteColor',
                                data: {
                                    pkId: data.PkId
                                },
                                dataType: 'json',
                                success: function (res) {
                                    if (res.ErrCode != 200) {
                                        return layer.msg(res.ErrMsg, { icon: 5 });
                                    }

                                    layer.msg('删除成功', { icon: 6 });
                                    initTable();
                                }
                            });
                        });
                    }
                });

                $('#btnAdd').on('click', function () {
                    editLevel('新增', {});
                });

                $('#btnSearch').on('click', function () {
                    initTable();
                });

                function editLevel(type, data) {
                    layui.laytpl(editForm.innerHTML).render(data, function (html) {
                        layer.open({
                            type: 1,
                            title: type,
                            area: ['450px', '320px'],
                            content: html,
                            btn: ['保存', '取消'],
                            success: function () {
                                layui.form.render('select');
                            },
                            yes: function (index) {
                                var code = $('#txtColorCode').val().trim(),
                                    color = $('#txtColor').val().trim();
                                if (!code) {
                                    return layer.msg('请输入颜色代码', { icon: 5 });
                                }
                                if (!color) {
                                    return layer.msg('请输入颜色名称', { icon: 5 });
                                }

                                var loadIndex = layer.load();
                                $.ajax({
                                    url: '/ParaSetting/SaveColor',
                                    data: {
                                        model: {
                                            PkId: $('#hidPkId').val(),
                                            ColorType: $('#selColorType').val(),
                                            ColorCode: code,
                                            Color: color
                                        }
                                    },
                                    dataType: 'json',
                                    success: function (res) {
                                        layer.close(loadIndex);
                                        if (res.ErrCode != 200) {
                                            return layer.msg(res.ErrMsg, { icon: 5 });
                                        }

                                        layer.msg('保存成功', { icon: 6 });
                                        layer.close(index);
                                        initTable();
                                    }
                                });
                            }
                        });
                    });
                }
            });
        }
    </script>
}
